import logo from './logo.svg';
import styles from './App.module.css';

import { events, filesystem, os } from '@neutralinojs/lib';
import { createEffect, createSignal } from 'solid-js';

function App() {
  const [entries, setEntries] = createSignal([]);
  const [err, setErr] = createSignal();
  const [errTriggered, setErrTriggered] = createSignal(false);
  const [clientVersionDisplay, setClientVersionDisplay] = createSignal();

  createEffect(() => {
    filesystem.readDirectory('./').then((data) => {
      setEntries(data);
    }).catch((err) => {
      setErrTriggered(true);
      setErr(err);
    }, []);
  });

  createEffect(() => {
    if (typeof NL_CVERSION !== 'undefined') {
      setClientVersionDisplay(NL_CVERSION);
    }
  });

  events.on('ready', () => {
    setClientVersionDisplay(NL_CVERSION);
  });

  return (
    <div class={styles.App}>
      <header class={styles.header}>
        <h1>Neutralino SolidJS template</h1>
        <img src={logo} class={styles.logo} alt="logo" />
        <p>{NL_APPID} is running on port {NL_PORT} inside {NL_OS}.<br />Neutralinojs server v{NL_VERSION}, client v{clientVersionDisplay()}</p>
        <div>
          <a href="#" class={styles.link} onClick={() => os.open('https://neutralino.js.org/docs')}>Neutralinojs docs</a> &middot;
          <a href="#" class={styles.link} onClick={() => os.open('https://github.com/solidjs/solid')}>Learn Solid</a>
        </div>
      </header>
      <main class={styles.main}>
        <Show when={!errTriggered()} fallback={<p>{err()}</p>}>
          <ul class={styles.entries}>
            <For each={entries()}>{(entry, i) =>
              <li>{entry.type === 'DIRECTORY' ? '\u{1F4C1}' : '\u{1F4C4}'} {entry.entry}</li>
            }</For>
          </ul>
        </Show>
      </main>
    </div>
  );
}

export default App;
